<template>
  <div class="main_box" style="padding-right:10px">
      <div class="add_wrap">
          <div class="tit">
              <h2>新 增 物 联 网 卡</h2>
              <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList"> 返 回</el-button>
          </div>
          <el-form :model="dataForm" ref="dataForm" label-width="180px" :rules="roleRules">
              <el-row>
                  <el-form-item label="iccid" prop="iccid">
                      <el-input v-model="dataForm.iccid" type="String" @keydown.native="keydown($event)"></el-input>
                  </el-form-item>
                  <el-form-item label="卡号" prop="card">
                      <el-input v-model="dataForm.card" type="String"></el-input>
                  </el-form-item>
                  <el-form-item label="网卡厂商" prop="company">
                      <el-select v-model="dataForm.company" clearable placeholder="请选择网卡厂商">
                          <el-option
                           v-for="item in pickCompanyList"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                          </el-option>
                      </el-select>
                  </el-form-item>
                  <el-form-item label="备注" prop="remark">
                      <el-input type="textarea" v-model="dataForm.remark"></el-input>
                  </el-form-item>
              </el-row>
              <el-row>
                  <el-form-item>
                      <el-button plain type="primary" @click="sureClick">保 存</el-button>
                      <el-button plain @click="returnList">取 消</el-button>
                  </el-form-item>
              </el-row>
          </el-form>
      </div>
  </div>
</template>

<script>

import * as message from "@/constants/message";
import EquipCardApi from '@/api/equip/equipCard';

export default {
    name:'boxCardAdd',
    data(){
        return{
            dataForm:{
                cardId: null,
                iccid: null,
                card: null,
                company: null,
                remark: null
            },
            roleRules:{
                iccid: [
                    { required: true, message: '请输入iccid唯一识别号', trigger: "blur" },
                ],
                /*card: [
                    { required: true, message: '请输入物联网卡号', trigger: "blur" },
                ],*/
                company: [
                    { required: true, message: '请选择网卡厂商', trigger: "blur" },
                ]
            },
            pickCompanyList:[
                { value: 1 ,label: "中国移动" },
                { value: 2 ,label: "中国联通" },
                { value: 3 ,label: "中国电信" }
            ]
        }
    },
    mounted(){
        this.init()
    },
    methods:{
        init(){
            if(this.$route.query.id){
                this.dataForm.cardId = this.$route.query.id;
                this.getData(this.dataForm.cardId);
            }
        },
        keydown(e) {
            if (e.keyCode == 32) {
                e.returnValue = false;
            }
        },
        sureClick(){
            this.$refs.dataForm.validate(valid =>{
                if(valid) {
                    this.$confirm(message.MSG_CONFIRM_SAVE_ALTER, message.TITLE_PROMPT, {})
                        .then(() => {
                            if(this.dataForm.cardId){
                                this.editData();
                            }else{
                                this.addData();
                            }
                        });
                }
            })
        },
        addData(){
          let cond = {
                iccid: this.dataForm.iccid,
                card: this.dataForm.card,
                company: this.dataForm.company,
                remark: this.dataForm.remark
            }
          EquipCardApi.addEquipCard(cond)
            .then(data =>{
              this.$Utils.notifySuccess();
              this.returnList();
            })
        },
        editData(){
          let cond = {
                cardId: this.dataForm.cardId,
                iccid: this.dataForm.iccid,
                card: this.dataForm.card,
                company: this.dataForm.company,
                remark: this.dataForm.remark
            }
          EquipCardApi.editEquipCard(cond)
            .then(data =>{
              this.$Utils.notifySuccess();
              this.returnList();
            })
        },
        getData(val){
            let cond ={
                id: val
            }
          EquipCardApi.getEquipCardInfo(cond)
            .then(res =>{
              this.dataForm.iccid = res.data.iccid
              this.dataForm.card = res.data.card
              this.dataForm.company = parseInt(res.data.company)
              this.dataForm.remark = res.data.remark
            });
        },
        returnList(){
            this.dataForm = [];
            this.$store.dispatch('delView', this.$route);
            this.$router.push({path: '/equip/boxCardManagement'})
        }
    }
}
</script>

<style lang="scss" src="@/assets/css/views/add.scss" scope>
</style>
